<template>
  <div class="white-module module">
    <div class="title"><span></span>参赛信息</div>

    <div class="info">
      <div class="item"><span style="width:70px">参赛代表队</span>{{teaminfo.team_name}}</div>
      <div class="item"><span style="width:70px">领队</span>{{teaminfo.real_name}}</div>
    </div>
    <div class="title"><span></span>赛事信息</div>
    <div class="info">
      <div class="item">
        <div class="o">  <span>参与赛项</span>{{record.item_name}}</div><span class="last"
      >指导老师</span
      >{{record.teachers}}
      </div>
      <div class="item">
        <div class="o"> <span>参赛组别</span>{{record.group_name}}</div><span class="last"
      >比赛时间</span
      >{{matchInfo.begindate}}
      </div>

      <div class="item">
        <div class="o">  <span>参赛选手</span>{{record.real_name}}</div><span class="last"
      >报名时间</span
      >{{record.create_date}}
      </div>



    </div>

    <div class="title"><span></span>选手信息</div>
    <div class="c">
      <div class="info">
        <div class="item"><span>姓名</span>{{this.userInfo.real_name}}</div>
        <div class="item"><span>性别</span>{{this.userInfo.sex==1?'男':'女'}}</div>
        <div class="item"><span>学习/单位</span>{{this.userInfo.company}}</div>
        <div class="item"><span>参赛证号</span>{{hideTicket(this.userInfo.ticket)}}</div>
      </div>

      <div class="images">
        <div class="item">
          <div class="image">
            <img
              :src="this.userInfo.header?this.userInfo.header:''"
            />
            <div class="z">
              <img src="@/assets/common/check.png" />
              <img src="@/assets/common/del.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" >

import {defineComponent, reactive, toRefs} from "vue";
import listService from "@/utils/listService";
import {getCache} from "@/utils/cache";
import router from "@/router";
import baseService from "@/utils/baseService";

export default defineComponent({
  mounted(){
    this.id=this.$route.query.id ;
    this.userId =this.$route.query.userId ;
    this.queryInfo();
  },

  data() {
    return {
      id : null as any,
      userId:null as any,
      userInfo:{
        ticket: '',
        sex: 1,
        header: "",
        real_name: "",
        company: "",
        id: "1"

      },
      teaminfo:{
        real_name: "",
        team_name: ""
      },
      record:{
        create_date:'',
        classname: "创意类",
        group_name: "初中组",
        teachers: "姓名7",
        item_name: "团体花样表演",
        real_name: "王莉莉、张悦悦、宋婷婷",
        id: "1655117165470240769",
        typename: "团体赛",
        team_name: "214234",
      }
      ,
      matchInfo:{
        id:'',
        match_name:'',
        signdate:'',
        begindate:'',
      }
    };
  },

  methods: {
    queryMatch(id:string){
      this.matchInfo.id
       = id;
      this.queryUserInfo(this.userId);
      baseService.get('/front/fast/match/match/info?id='+id).then(e=>{
        this.matchInfo= e.data;
      })
    },
    queryInfo(){
      if(!this.id){
        return;
      }
      baseService.get('/front/fast/match/matchRecordItem/info?myinfo=1&id='+this.id).then(e=>{
        this.record= e.data;
        this.queryMatch(e.data.match_id);
        this.queryTeamInfo(e.data.team_id);
      })
    }
    //查询赛项信息
    ,queryTeamInfo(id:any){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.teaminfo = e.data;
        }
      });
    }//查询赛项信息
    ,queryUserInfo(id:any){
      baseService.get("/front/fast/user/userInfo/info?id="+id+"&matchId="+this.matchInfo.id).then((e:any)=>{
        if(e.code=='0'){
          this.userInfo = e.data;
        }
      });
    },
    /**
     * 证件号隐藏前三位
     */
    hideTicket(ticket: string) {
      //隐藏前三位
      return ticket && ticket.length>3 ? ticket.substr(3, ticket.length): ticket;
    }


  }
});
</script>

<style lang="scss" scoped>
.module {
    padding: 20px 0px 50px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }

    .c {
        display: flex;
        align-items: flex-start;
        .info{
            width: 490px;
        }
    }

    .info {
        margin-bottom: 34px;

        .item {
            display: flex;
            align-items: center;
            margin-top: 14px;
            color: #4f5a70;
  .o{
    width: 524px;
  }
            span {
                width: 60px;
                margin-left: 35px;
                text-align: right;

                margin-right: 20px;
            }
        }
    }

    .images {
        display: flex;

        margin-top: 10px;
        .item {
            display: flex;
            margin-left: 61px;
            font-weight: $font-weight-bold;

            .image {
                background: rgba(222, 224, 227, 0.23);
                border-radius: 4px;
                padding: 8px 11px;
                margin-left: 8px;
                position: relative;

                >img {
                    height: 104px;
                    display: block;
                }

                .z {
                    position: absolute;
                    left: 11px;
                    top: 8px;

                    width: calc(100% - 22px);
                    height: calc(100% - 16px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0, 0, 0, 0.5);
                    display: none;

                    img {
                        width: 14px;
                        height: 14px;
                        margin: 0px 6px;
                        cursor: pointer;
                    }
                }

                &:hover {
                    .z {
                        display: flex;
                    }
                }
            }
        }
    }
}
</style>
